/*
|--------------------------------------------------------------------------
|  /index/assess/waitGrade/assessPointDetails    待我评分/考核点详情
|--------------------------------------------------------------------------
|
| author：陈胜云
| fetch：本页面的fetch、功能说明
| DOTO:  备注:上报模块去掉了
|
*/

import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import { Link } from 'react-router-dom'
import {merge} from "lodash"


/*ant 组件*/
import {Input, Button, Icon, Row, Col, Tag, Tabs, InputNumber, Upload, message, Badge, Menu, Avatar } from "antd"
const Search = Input.Search;


/*数据交换*/
import { changePointIndex } from "./../../actions"


/*子模块*/
import Board from "./components/board" //考核板
import Log from "./components/log" //考核板


/*css依赖*/
import "./style.less"

/*子页面*/




/*redux连接池*/
@connect(
    ({waitGrade, assessPointDetails}) => ({
        nowProject:waitGrade.nowProject,  // 项目
        nowProjectPoint:waitGrade.nowProjectPoint, // 项目里的所有点
        pointIndex:waitGrade.pointIndex,  // 当前展示点的index
        nowPerson:assessPointDetails.nowPerson  // 当前点中，展示的人
    }),
    (dispatch) => (
      bindActionCreators({
        changePointIndex
      }, dispatch)
    )
)
export default class AssessPointDetails extends PureComponent {
  state = {
    unAbleLeft:true,
    unAbleRight:true
  }

  previous = () => {
    const {pointIndex,nowProjectPoint,changePointIndex} = this.props;
    const index = pointIndex - 1;
    if(index == -1) {
      this.setState({
        unAbleLeft:false
      })
    } else {
      changePointIndex(index);      
    }
  } 

  next = () => {
    const {pointIndex,nowProjectPoint,changePointIndex} = this.props;
    const index = pointIndex + 1;
    console.log(index);
    console.log(changePointIndex.length,"changePointIndex.length")
    if(index == nowProjectPoint.length) {
      console.log("enter")
      this.setState({
        unAbleRight:false
      })
    } else {
      console.log("do")
      changePointIndex(index);      
    }
  }


  render() {
      const {nowPerson,nowProject,nowProjectPoint,pointIndex} = this.props;
      const {} = this.state;
      const uploadProps = {
        name: 'file',
        action: '//jsonplaceholder.typicode.com/posts/',
        headers: {
          authorization: 'authorization-text',
        },
        onChange(info) {
          if (info.file.status !== 'uploading') {
            console.log(info.file, info.fileList);
          }
          if (info.file.status === 'done') {
            message.success(`${info.file.name} file uploaded successfully`);
          } else if (info.file.status === 'error') {
            message.error(`${info.file.name} file upload failed.`);
          }
        },
      };


    return (
      <div className="pointDetails">

          {/*顶部考核项切换*/}
          <div className="pointDetails-title">
            <div className="pointDetails-title-wrap">


              <div className="titleChange" onClick={()=>{this.previous()}}>
                <Icon type="caret-left" />上条
                </div>

              <h4>考核项：{nowProject}--考核点：{nowProjectPoint[pointIndex].name}</h4>
              
              <div className="titleChange" onClick={()=>{this.next()}}>
                下条<Icon type="caret-right" />
              </div>


            </div>
          </div>

          {/*左侧考核板*/}
          <Board />

          <div className="pointDetails-content">

            {/*打分范围*/}
            <div className="pointDetails-content-standard">
                <div className="area">
                  <h4>打分范围</h4>
                 <Tag color="#f50">下限 10</Tag>
                 <span className="sepSpan">至</span>
                 <Tag color="#f50">上限 20</Tag>
                </div>
                <div className="times">
                  <h4>考核时间段：2016 至 2017 <span></span> 已考核：3轮</h4>
                </div>
                <div className="tips">
                  <h4>
                    考核标准
                    <label htmlFor="">每次不按标准，扣10元</label>
                  </h4>
                </div>
            </div>

            {/*打分版 + 得分版*/}
            <div className="pointDetails-content-doIt">
              <div className="pointDetails-content-doIt-left">
                <h4>{nowPerson.name}</h4>
                <InputNumber 
                  size="large" 
                  min={0} 
                  max={10} 
                  defaultValue={3}
                  onChange={()=>{}}
                  />                  
                <p>正在进行第四轮　2017/06/11截止</p>
                <div className="btn-Wrap">
                  <Button type="primary">确认考核</Button>
                  <Upload {...uploadProps}>
                    <Button>
                      <Icon type="upload" />上传考核佐证
                    </Button>
                  </Upload>
                </div>
              </div>
              <div className="pointDetails-content-doIt-right">
                  <h4>
                    他的考核点
                    <span>
                      <Icon type="exception" />
                      <Link to="/index/assess/waitGrade/assessPointDetails/dataFile">考核资料库</Link>
                    </span>
                  </h4>
                  {
                    !!nowPerson.point &&(
                    <div className="point">
                      <div className="point-item">
                        <h3>{nowPerson.point[0]}</h3>
                        <p>目前得分</p>
                      </div>
                      <span className="splitPoint"></span>
                      <div className="point-item">
                        <h3>{nowPerson.point[1]}</h3>
                        <p>综合得分</p>
                      </div>
                      <span className="splitPoint"></span>
                      <div className="point-item">
                        <h3>{nowPerson.point[2]}</h3>
                        <p>部门排名</p>
                      </div>
                      <span className="splitPoint"></span>
                      <div className="point-item">
                        <h3>{nowPerson.point[3]}</h3>
                        <p>同考核点排名</p>
                      </div>
                    </div>)
                  }                  
              </div>
            </div>

            {/*考核日志*/}
            <Log />

          </div>
      </div>
    )
  }
  componentDidMount() {

  }
  handleClick = ()=> {

  }
}
